<template>
  <a-tree
    :show-line="true"
    :show-icon="true"
    :defaultExpandAll="true"
    :treeExpandedKeys="treeExpandedKeys"
    :tree-data="categoriesTreeData"
    @select="onMenuItemClick"
  >
    <template #title="{ dataRef }">
      <template v-if="dataRef.key === '0-0-0-1'">
        <div>multiple line title</div>
        <div>multiple line title</div>
      </template>
      <template v-else>{{ dataRef.title }}</template>
    </template>
    <template #switcherIcon="{ dataRef, defaultIcon }">
      <SmileTwoTone v-if="dataRef.key === '0-0-2'" />
      <component :is="defaultIcon" v-else />
    </template>
  </a-tree>
</template>
<script lang="ts">
  import { defineComponent, unref } from 'vue';
  import { CarryOutOutlined, SmileTwoTone } from '@ant-design/icons-vue';

  export default defineComponent({
    name: 'CmsCategoryMenuComponent',
    components: {
      CarryOutOutlined,
      SmileTwoTone,
    },
    props: {
      currentCategoryIds: {},
      categoriesTreeData: {},
      treeExpandedKeys: {},
      clickMenuItem: Function,
    },
    setup(props, context) {
      //显示时自动展开全部节点，通过设置defaultExpandAll和treeExpandedKeys均无效，原因未知
      console.log('treeExpandedKeys', unref(props.treeExpandedKeys));
      // 点击菜单项
      function onMenuItemClick(clickCategory) {
        // console.log('CmsMenu onMenuItemClick', clickCategory);

        // props.clickCategory(categoryId);
        context.emit('clickMenuItem', clickCategory);
      }

      return {
        onMenuItemClick,
      };
    },
  });
</script>
